import React from 'react';
import PropTypes from 'prop-types'
import { ListUl, Bordiv,Listli } from './ListStyle'
import { useHistory } from 'react-router-dom'
import { Toast } from 'antd-mobile';

const List = (props) => {
    let history = useHistory() 
    return (
        <ListUl> 
            {
                props.list.map(v => {
                    return (
                        <Listli key={v.zyId} zyStatus={v.zyStatus}>
                            <div>
                                <h3>
                                    <span>{v.grade}{v.clazz}</span>
                                    <span>{v.zyDate}</span>
                                </h3>
                                <p>
                                    <span>内容：{v.zyName}</span>
                                    <span onClick={ ()=>  Toast.offline('Network connection failed !!!', 1)}>{v.zyStatus ? '已检查' : "待检查"} <i className='yo-ico'>&#xe67a;</i></span>
                                </p>
                                <h4>完成：<em  style={{ color:v.complete === v.total ? '#000' : '#FF9000' }}>{v.complete}</em>/{v.total}</h4>
                            </div>
                            <Bordiv 
                                width={'1px 0 0'} 
                                onClick={  v.send===1 ? ()=> history.push('/detail',v.fid) : ()=> Toast.success('发送成功 !!!', 1)}
                            >
                                {v.send===1 ? "查看作业单" : '发送作业单'}
                            </Bordiv>
                        </Listli>
                    )
                })
            }
        </ListUl>
    );
}

List.propTypes={
    list:PropTypes.object
} 
export default List;